<template>
	<div class="nav-box">
		<ul class="nav">
			<li>
				<router-link to="/" :class="">
					<p>首页</p>
				</router-link>
			</li>
			<li v-for="(item,index) in navList" :key="index" v-if="item.typename.split('').length<=2" >
				<router-link :to="{name:'bAnimation',params:{tid:item.tid}}" :class="{active:item.tid==getTid}"  ><p>{{item.typename}}</p></router-link>
			</li>
			<li v-else >
				<router-link :to="{name:'bAnimation',params:{tid:item.tid}}" :class=""  ><p>{{item.typename}}</p></router-link>
			</li>
		</ul>
		<div class="arrow-down"  @click="opens">
			<svg class="index__icon__src-home-zone-" aria-hidden="true" id="arrow-dow"><use xlink:href="#icon-xialaxiao"></use></svg>
		</div>
		<div class="list-wrap" :class="{slideDown:open}">
			<div class="wrap">
				<router-link to="/" :class="" >
					<span>
						首页
					</span>
				</router-link>
			</div>
			<div v-for="(item,index) in navList" :key="index" class="wrap">
				<router-link :to="{name:'bAnimation',params:{tid:item.tid}}" :class="" >
					<span>
						{{item.typename}}
					</span>
				</router-link>
			</div>
			<div class="arrow-up" @click="opens">
				<svg class="index__icon__src-home-zoneAll-" aria-hidden="true" id="arrow-up"><use xlink:href="#icon-shouqixiao"></use></svg>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		created(){
			this.navList=window.__INITIAL_STATE__.reduxAsyncConnect.partitionList[0]
			this.$store.commit('setTid',{
					curTid:this.$route.params.tid
				})
		},
		data(){
			return{
				open:false,
				navList:[],
			}
		},
		computed:{
			getTid(){
				return this.$store.getters.getTid
			}
		},
		watch:{
			$route(newValue){
//				this.$store.commit('setTid',{
//					curTid:newValue.params.tid
//				})
			},
		},
		mounted(){
		},
		methods:{
			opens(){
				this.open=!this.open
			},
		}
	}
</script>

<style lang="scss">
.nav-box{
    background:#fff;
    width: 100%;
    height: 46px;
    position: fixed;
    top: 56px;
    z-index: 9;
}
.nav {
	width: 95%;
	padding-left: 5%;
    overflow-x: scroll;
    overflow-y: hidden;
    &::-webkit-scrollbar{
    	display: none;
    }
    height: 46px;
    white-space: nowrap;
    padding-bottom: 2%;
	& > li{
		display: inline-block;
		background: #fff;
    	margin-right: 10%;
		p{
		    font-size: 16px;
		    line-height: 42px;
		    text-align: center;
		    color: #757575;
		    border-bottom: 2px solid #fff;
		}
		.router-link-exact-active,.active{
			&>p{
				color: #fb7299;
		    	border-bottom: 2px solid #fb7299;
			}
		}
	}
}
.arrow-down{
    position: absolute;
    top: 0;
    width: 46px;
    height: 46px;
    right: 2%;
    background: #fff;
    svg{
	    display: block;
	    width: 16px;
	    height: 42px;
	    margin: auto;
	    fill: #aaa;
    }
}
.list-wrap{
	position: fixed;
	top: 9%;
	padding: 0 3%;
    background-color: #FFFFFF;
    transform: translateY(-200%);
    transition: all .5s;
    z-index:9999;
    .wrap{
    	display: inline-block;
		width: 15%;
		color: #757575;
		margin-bottom: 3%;
		text-align: center;
    }
	/*a{
		display: inline-block;
		width: 15%;
		color: #757575;
		margin-bottom: 3%;
		text-align: center;
	}*/
	span{
		width: 38px;
	    font-size: 16px;
	    line-height: 36px;
	    padding-bottom: 25%;
	    text-align: center;
	    color: #757575;
	    border-bottom: 2px solid #fff;
	}
	.router-link-exact-active{
		&>span{
			border-bottom: 2px solid #fb7299;
			color: #fb7299;
		}
	}
	.arrow-up{
	    margin: 2% auto;
	    width: 100%;
	    height: 20px;
	    svg{
	    	position: absolute;
		    display: block;
		    width: 20px;
		    height: 20px;
		    margin: auto;
		    left: 45%;
		    fill: #aaa;
	    }
	}
}
.slideDown{
	transform: translateY(0);
}
</style>